import { useState } from 'react'
import {
  InputAdornment, IconButton,
  FormControl, InputLabel, OutlinedInput,
} from '@mui/material'

export default function PasswordTextField(props: {
  label: string
  value: string
  placeholder?: string
  onChange: (value: string) => void
}) {
  const [showPassword, setShowPassword] = useState(false)
  const handleClickShowPassword = () => setShowPassword(show => !show)

  return (
    <FormControl variant="outlined" fullWidth>
      <InputLabel htmlFor="outlined-adornment-password">{props.label}</InputLabel>
      <OutlinedInput
        id="outlined-adornment-password"
        type={showPassword ? 'text' : 'password'}
        label={props.label}
        margin="dense"
        fullWidth
        placeholder={props.placeholder}
        value={props.value}
        onChange={e => props.onChange(e.target.value.trim())}
        endAdornment={(
          <InputAdornment position="end">
            <IconButton
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <div className="i-material-symbols:visibility-off-rounded" /> : <div className="i-material-symbols:visibility-rounded" />}
            </IconButton>
          </InputAdornment>
        )}
      />
    </FormControl>
  )
}
